<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">完善资料</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--完善资料start-->
		<view class="improve">
			<view class="improve_tab">
				<text class="active">验证手机</text>
				<text>设置密码</text>
				<text>确认姓名</text>
			</view>
			
			<view class="intro">手机号码只能在完善资料时更改一次，并以此作为新的登录账号，请认真谨慎操作。</view>
			
			<view class="tel_form">
				<view class="tel">
					<view class="type">
						<image :src="c_img"></image>
						<view @tap="open_choose">{{c_name}}</view>
					</view>
					<view class="inputs">
						<label>+86</label>
						<u-input type="number" placeholder="输入手机号" value="13800988899" placeholderStyle="color: #C9CACA" v-model="cusname" @focus="keyboard_show = true"></u-input>
						<image src="/static/images/img_07.png" class="tel_close"  v-if="cusname.length>0" @click="cusname=''"></image>
					</view>
				</view>
				<view class="input_code">
					<u-input placeholder="输入验证码" placeholderStyle="color: #C9CACA"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" ref="uCode"  @change="codeChange"></u-code>
					<u-button @tap="getCode">{{tips}}</u-button>	
				</view>	
			</view>
			
		</view>
		<!--完善资料end--> 
		
		<!--底部start-->
		<view class="f_btn">
			<button class="submit on">确定</button>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<!--底部end-->
		
		<u-popup :show="tel_show" :closeOnClickOverlay="true" @close="choose_popup_close">
			<view class="choose">
				<view class="tit">国际区号<image src="/static/images/img_31.png" mode="widthFix"  @tap="choose_popup_close"></image></view>
				<view class="list">
					<view v-for="(item,index) in items" :key="index" :class="{active:count == index}" @click="change(index,item)">
						<image :src="item.url"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!--键盘start-->
		<u-keyboard mode="number" ref="uKeyboard" @change="valChange" @backspace="backspace" :tooltip="tooltip" :dotDisabled="true" :show="keyboard_show" :closeOnClickOverlay="true" @close="key_close"></u-keyboard>
		<!--键盘end-->
		
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
				tel_show: false,
				items: [
					{
						url:'/static/images/img_03.png',
						name:"CN"
					},
					{
						url:'/static/images/img_04.png',
						name:"US"
					},
					{
						url:'/static/images/img_05.png',
						name:"IN"
					}
				],
				count: "",
				c_img:"/static/images/img_03.png",
				c_name:"CN",
				cusname:"13800988899",
				keyboard_show: false,
				tooltip:false,
				overlayOpacity: 0.8
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			open_choose(){
				this.tel_show = true
			},
			choose_popup_close(){
				this.tel_show = false
			},
			change(e,item) {
			    this.count = e,
				this.tel_show = false,
				this.c_name = item.name,
				this.c_img = item.url
			},
			valChange(val) {
				this.cusname += val;
			},
			backspace(){
				if(this.cusname.length) this.cusname = this.cusname.substr(0, this.cusname.length - 1);
			},
			key_close(){
				this.keyboard_show =false
			}
		}
	}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("member.scss");
</style>